<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="jquery.fly.min.js"></script> 
	<meta charset="UTF-8">
	<title>Animate</title>
    <style type="text/css">
        #di{
            width:500px;
            height:500px;
            overflow: scroll;
            position:absolute;
             top:50px;
             right:-500px;
            display:none;
        }
        #showbt{
             position:absolute;
             top:50px;
             right:0px;
        }
         .table th, .table td { 
            text-align: center;
            vertical-align: middle!important;
        }
        .input-group .form-control{
            margin-bottom: 16px;
        }
       
    </style>
</head>
<body>
    <div id="showFood">
      <div>
				<li class="productId">1</li>
				<li><img src="logo.png" /></li>
                <li>Juice</li>
                <li>12</li>
                <li><button class="order">订购</button></li>
      </div>
      <div>
				<li class="productId">2</li>
				<li><img src="logo.png" /></li>
                <li>Rice</li>
                <li>12</li>
				<li><button class="order">订购</button></li>
       </div>
      <div>
				<li class="productId">3</li>
				<li><img src="logo.png" /></li>
                <li>Cake</li>
                <li>12</li>
				<li><button class="order">订购</button></li>
    </div>
    
    
    </div>
    <button id="showbt" class="sidebar">show</button>
	<div class="sidebar" id="di">
         <button id="hidebt">hide</button>
        <table id="cartTable" class="cart table table-condensed" >
     <thead id="thead">
         <tr>
             <th style="width:60px;"><label><input class="check-all check" type="checkbox" /> 全选</label></th>
             <th><label>食品</label></th>
             <th style="width:100px;"><label>单价</label></th>
             <th style="width:120px;"><label>数量</label></th>
             <th style="width:100px;"><label>小计</label></th>
             <th style="width:40px;"><label>操作</label></th> 
         </tr>
         </thead>
 </table>
        <div class="row">
     <div class="col-md-12 col-lg-12 col-sm-12">
         <div style="border-top:1px solid gray;padding:4px 10px;">
             <div style="margin-left:20px;" class="pull-right total">
                <label>金额合计:<span class="currency">￥</span><span id="priceTotal" class="large-bold-red">0.00</span></label>
                 <div id="accounts">
                <span class="delete btn btn-xs btn-primary" style="float:right">结算</span>
             </div>
             </div>
             <div class="pull-right">
                <label>您选择了<span id="itemCount" class="large-bold-red" style="margin:0 4px;"></span>种产品型号，共计<span id="qtyCount" class="large-bold-red" style="margin:0 4px;"></span>件</label>
                 
             </div>
             
             <div class="pull-right selected" id="selected">
                <span id="selectedTotal"></span>
             </div>
         </div>
     </div>
 </div>  
    </div>
</body>
    <script type="text/javascript">
        $(function(){
             $("#hidebt").on("click",function(){
                
                $("#di").animate({right:"-500px"},300,'linear',callback);
             });
             
            $("#showbt").on("click",function(){
                $("#di").animate({right:"0px"},300,'linear',callback1);
                $("#showbt").hide();
             });

           
            
             function callback1(){
                  $("#di").show();
                  $.ajax({
                    type:"GET",
                    url:"http://ZHA-ITA142-W7:3000/foods",
                    dataType:"json"
                })
                .done(function(msg){
                   var op = tableOperator($("table"),msg)
                    op.createTable();
                })
             }
            
            function callback(){
                $("#showbt").show();
                $("#di").hide();
             }
            
            
            function tableOperator(table,data){
                var obj = [];
                var thead = $("#thead");
                obj.createTable=function(){
                    table.empty();
                    var tbody = $("<tbody>");
                    data.forEach((item,index)=>{
                        table.append(thead);
                        table.append(tbody);
                        var tr = $("<tr></tr)");
                        var td1 = $("<td></td>");
                        var td1_input = $("<input>").addClass("check-one").addClass("check").attr("type","checkbox");
                        td1.append(td1_input);
                        var td2 = $("<td></td>").addClass("goods");
                        var lable = $("<lable></lable>").text(item.name);
                        td2.append(lable);
                        var td3 = $("<td></td>").addClass("number").addClass("small-bold-red");
                        var td3_span = $("<span></span>").text(item.age);
                        td3.append(td3_span);
                        td4 = $("<td></td>").addClass("input-group")
                        var td4_span1 = $("<span></span>").addClass("input-group-addon").addClass("minus").text("-");
                        td4.append(td4_span1);
                        var td4_input = $("<input>").attr("type","text").addClass("number").addClass("form-control").addClass("input-sm").attr("value",item.id);
                        td4.append(td4_input);
                        var td4_span2 = $("<span></span>").addClass("input-group-addon").addClass("plus").text("+");
                        td4.append(td4_span2);
                        var td5 = $("<td></td>").addClass("subtotal").addClass("number").addClass("small-bold-red").text(item.age*item.id);
                        var td6 = $("<td></td>").addClass("operation");
                        var td6_span = $("<span></span>").addClass("delete").addClass("btn").addClass("btn-xs").addClass("btn-primary").text("删除").attr("id",index);
                        td6.append(td6_span);
                        tr.append(td1).append(td2).append(td3).append(td4).append(td5).append(td6);
                        tbody.append(tr);
                        td6.on("click",function(){
                            delItem(item.id,tr);
                        })
                    })
                
                    
                }                
                return obj;
            }
            
            function delItem(id,tr){
                $.ajax({
                    type:"DELETE",
                    url:"http://ZHA-ITA142-W7:3000/foods/"+id,
                    dataType:"json"
                })
                .done(function(msg){
                    tr.remove();
                   console.log("delete...");
                })
            }
            
            
            var offset = $(".sidebar").offset();
            
			$(".add").click(
					function(event) {
						var tdval=$(".productId").text();
						var addcar = $(this);
						
						var img = addcar.parent().find('img').attr('src');
						var flyer = $('<img class="u-flyer" src="'+img+'">');
						flyer.fly({
							start : {
								left : event.pageX, 
								top : event.pageY
							
							},
							end : {
								left : offset.left + 10,
								top : offset.top + 10,
								width : 0, 
								height : 0
                               
							
							},
							onEnd : function() { 
                                 
								$("#msg").show().animate({
									width : '250px'
								}, 200).fadeOut(1000); 
								addcar.css("cursor", "default").removeClass(
										'orange');
								//alert(tdval);
								this.destroy();
							}
						});
					});
         
        });
   
        
    </script>
</html>